<template>
  <view>
    <headerss title='商品列表'></headerss>
    <!--  -->
    <view class="product_list">
      <scroll-view class="button-scroll" scroll-x>
        <view class="button-container">
          <button class="scroll-button">大学生服务专区</button>
          <button class="scroll-button">家居 / 家具 / 家装 / 厨具</button>
          <button class="scroll-button">大学生服务专区</button>
          <button class="scroll-button">按钮4</button>
          <!-- 添加更多按钮 -->
        </view>
      </scroll-view>
      <view class="line">
      </view>
      <view class="screen">
        筛选
      </view>
    </view>

    <!--  -->
    <view class="sort_list">
      <button>自习室</button>
      <button>公寓</button>
      <button>房屋出租</button>
      <button>就电动自行车</button>
      <view class="unfold">展开 <image src="../../static/imgs/Frame 1494.png"></image>
      </view>
    </view>

    <!--  -->
    <view class="item">
      <view class="screening">
        <view class="">综合排序</view>
        <view class="">销量</view>
        <view class="">价格</view>
      </view>
    </view>
    <!--  -->
    <view class="items">
      <view class="item_list" v-for="item in 8">
        <view class="item_image">
          <image src="../../static/img/tx.jpg" mode=""></image>
        </view>
        <view class="">
          <view class="">原神温迪神之眼周边蒙德项链手链挂饰铜镀18K金</view>
          <view class="price">￥ <text> 100</text> </view>
          <view class="dianpu">
            <text>开芯网官方店铺</text>
            <text>100付款</text>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {

    }
  }
</script>

<style scoped lang="scss">
  // 商品名称列表
  .product_list {
    // position: relative;
    display: flex;
    height: 116rpx;
    background: #FFFFFF;
    border-bottom: 2rpx solid #EEEEEE;

    .line {
      width: 10rpx;
      height: 116rpx;
      background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
    }

    // 筛选
    .screen {
      // position: absolute;
      // right: 0;
      // top: 0;
      line-height: 116rpx;
      display: inline-block;
      font-size: 28rpx;
      width: 144rpx;
      height: 116rpx;
      text-align: center;
      color: #3369FF;
      background: #FFFFFF;
    }
  }

  .button-scroll {
    padding-left: 32rpx;
    // padding-right: 144rpx;
    // height: 116rpx;
    line-height: 116rpx;
    background: #FFFFFF;
    white-space: nowrap;
    /* 禁止换行，使按钮横向排列 */
    overflow-x: scroll;
    /* 开启水平滚动 */
    -webkit-overflow-scrolling: touch;

    /* 支持滚动效果 */
    .button-container {
      display: inline-flex;
      /* 按钮容器内的按钮采用行内弹性布局 */
    }

    .scroll-button {
      font-size: 24rpx;
      font-weight: 500;
      color: #333333;
      border-radius: 28rpx 28rpx 28rpx 28rpx;
      background: #F2F2F2;
      /* 设置按钮宽度，可以根据实际需求进行调整 */
      margin-right: 20px;
      /* 设置按钮之间的间距，可以根据实际需求进行调整 */
    }

    .scroll-button:hover {
      color: #FFFFFF;
      background: #3369FF;
    }
  }

  // =============
  .sort_list {
    position: relative;
    display: flex;
    // flex-wrap: wrap;

    padding: 30rpx 32rpx;
    border-top: 1px solid #EEEEEE;
    // width: 750rpx;
    height: 118rpx;
    background: #FFFFFF;

    .unfold {
      position: absolute;
      font-size: 24rpx;
      bottom: -20rpx;
      left: 43%;
      width: 112rpx;
      height: 40rpx;
      text-align: center;
      line-height: 40rpx;
      color: #3369FF;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      >image {
        margin-left: 10rpx;
        width: 20rpx;
        height: 20rpx;
      }
    }

    >button {

      margin-bottom: 30rpx;
      margin-right: 20rpx;
      font-size: 24rpx;
      height: 56rpx;
      line-height: 56rpx;
      color: #333333;
      background: #F2F2F2;
      border-radius: 28rpx 28rpx 28rpx 28rpx;

    }

    >button:hover {
      color: #FFFFFF;
      background: #3369FF;
    }
  }

  // 
  .item {
    // width: 100%;
    padding: 30rpx 0;
    margin-top: 40rpx;
    background: #FFFFFF;

    border-bottom: 2rpx solid #EEEEEE;

    .screening {
      display: flex;
      justify-content: space-around;
    }

  }

  //
  .items {
    padding: 30rpx 32rpx 0;
    background: #FFFFFF;
  }

  .item_list {
    display: flex;
    // justify-content: space-evenly;
    padding-bottom: 20rpx;

    .item_image {
      width: 200rpx;
      height: 200rpx;
      margin-right: 20rpx;

      >image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
      }
    }

    .price {
      margin: 25rpx 0 15rpx;
      color: #FA4343;
      font-size: 28rpx;

      >text {
        font-size: 40rpx;
      }
    }

    .dianpu {

      height: 24rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;

      >text {
        margin-right: 20rpx;
      }
    }
  }
</style>